{% extends 'student/base.html' %}
{% load static %}

{% block title %}Announcement Details{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/announcement_details.css' %}">
<style>
    .announcement-image {
        max-width: 100%;
        height: auto;
        border-radius: 15px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        margin-bottom: 30px;
        transition: transform 0.3s ease;
    }
    .announcement-image:hover {
        transform: scale(1.02);
    }
</style>
{% endblock %}

{% block content %}
<section>
  <div class="td_height_120 td_height_lg_80"></div>
  <div class="container">
    <div class="row td_gap_y_50">
      <div class="col-12">
        <div class="td_blog_details_wrap">
          <!-- Return button -->
          <div class="mb-4 d-flex justify-content-end">
            <a href="{% url 'student_announcements' %}" class="td_btn td_style_1 td_radius_10 td_medium">
              <span class="td_btn_in td_accent_color">
                <span>返回公告列表</span><i class="fas fa-arrow-right ms-2"></i>
              </span>
            </a>
          </div>

          <div class="td_blog_details">
            <!-- Announcement image -->
            <div class="td_blog_details_img mb-4">
              <img src="{{ announcement.image.url|default:'/static/assets/img/Background1.png' }}" 
                   alt="{{ announcement.title|default:'公告图片' }}" 
                   class="announcement-image">
            </div>

            <!-- Announcement information -->
            <div class="td_blog_details_info">
              <h1>{{ announcement.title }}</h1>
              
              <!-- Announcement metadata -->
              <div class="td_blog_details_meta">
                <span><i class="far fa-calendar-alt"></i>{{ announcement.publish_date|date:"F d, Y" }}</span>
                <span><i class="far fa-user"></i>{{ announcement.author }}</span>
                <span><i class="fas fa-tag"></i>{{ announcement.get_category_display }}</span>
              </div>

              <!-- Content -->
              <div>
                {{ announcement.content|safe }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="td_height_120 td_height_lg_80"></div>
</section>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/admin/announcement_details.js' %}"></script>
{% endblock %}
